<template>
	<div id="product">
		<!-- <commponentVue title="产品管理" 
		:iconClass="{fontSize:20,color:'red'}"
		count="5"
		:data="[{name:'张山'},{name:'李四'}]"
		@callBack="callBackFuc"></commponentVue>
		<comtextVue :value="value"></comtextVue>
		{{title}}
		<el-button @click="goBack()" type="primary">返回</el-button>
		<el-button @click="showBack()" type="primary">翻倍</el-button>
		<el-table :data="tableData" stripe style="width: 100%">
			<el-table-column prop="date" label="日期" width="180">
			</el-table-column>
			<el-table-column prop="name" label="姓名" width="180">
			</el-table-column>
			<el-table-column prop="address" label="地址">
			</el-table-column>
		</el-table>
		<div class="block">
		  <el-pagination
		    layout="prev, pager, next"
		    :total="50"
			 class="pagination-container">
		  </el-pagination>
		</div> -->
		<div class="search_from">
			<el-input size="mini" style="width:200px" v-model="search_form.input" placeholder="请输入商品信息"></el-input>
			  <el-select size="mini" v-model="search_form.value1" placeholder="请选择">
			    <el-option
			      v-for="(item,index) in options"
			      :key="item.value"
			      :label="item.label"
			      :value="item.value">
			    </el-option>
			  </el-select>
			  <span v-bind:name="hehe"></span>
			  <span :name="getName"></span>
			  <el-button style="background-color: aquamarine;" size="mini" @click="search()">搜索</el-button>
			  <el-button style="background-color: aquamarine; margin-left: 0%;" size="mini" @click="add">添加</el-button>
			  <el-dialog title="添加商品" :visible.sync="dialogVisible" width="60%">
				  <el-form :visible.sync="dialogVisible" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				    <el-form-item label="活动名称" prop="name">
				      <el-input v-model="ruleForm.name"></el-input>
				    </el-form-item>
				    <el-form-item label="活动区域" prop="region">
				      <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
				        <el-option label="区域一" value="shanghai"></el-option>
				        <el-option label="区域二" value="beijing"></el-option>
				      </el-select>
				    </el-form-item>
				    <el-form-item label="活动时间" required>
				      <el-col :span="11">
				        <el-form-item prop="date1">
				          <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
				        </el-form-item>
				      </el-col>
				      <el-col class="line" :span="2">-</el-col>
				      <el-col :span="11">
				        <el-form-item prop="date2">
				          <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
				        </el-form-item>
				      </el-col>
				    </el-form-item>
				    </el-form-item>
				    <el-form-item label="活动性质" prop="type">
				      <el-checkbox-group v-model="ruleForm.type">
				        <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
				        <el-checkbox label="地推活动" name="type"></el-checkbox>
				        <el-checkbox label="线下主题活动" name="type"></el-checkbox>
				        <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
				      </el-checkbox-group>
				    </el-form-item>
				    <el-form-item label="特殊资源" prop="resource">
				      <el-radio-group v-model="ruleForm.resource">
				        <el-radio label="线上品牌商赞助"></el-radio>
				        <el-radio label="线下场地免费"></el-radio>
				      </el-radio-group>
				    </el-form-item>
				    <el-form-item label="活动形式" prop="desc">
				      <el-input type="textarea" v-model="ruleForm.desc"></el-input>
				    </el-form-item>
				    <el-form-item>
				      <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
				      <el-button @click="resetForm('ruleForm')">重置</el-button>
				    </el-form-item>
				  </el-form>
			  </el-dialog>
			 
		</div>
		<div style="margin-top: 10px;">
			 <el-table
			    :data="tableData"
			    stripe
			    style="width: 100%">
			    <el-table-column
			      prop="date"
			      label="日期"
			      width="180">
			    </el-table-column>
				<el-table-column label="头像" width="180">
					<template slot-scope="scope">
						<el-image style="width: 100px; height: 100px border-radius:50%;"
						:src="scope.row.avatar">
						</el-image>
					</template>
				</el-table-column>
			    <el-table-column
			      prop="name"
			      label="姓名"
			      width="180">
			    </el-table-column>
			    <el-table-column
			      prop="address"
			      label="地址">
			    </el-table-column>
				<el-table-column>
					<el-button 
					  style="background-color: aquamarine; margin-left: 0%" 
					  size="mini" 
					  @click="openAddDialog"> <!-- 修改点击事件 -->
					  添加
					</el-button>
				</el-table-column>
			  </el-table>
		</div>
		<div style="display: flex; justify-content: center; margin-top: 0%;">
			<el-pagination
			  background
			  layout="prev, pager, next"
			  :total="1000">
			</el-pagination>
		</div>
	<!-- 	<el-dialog title="提示" :visible.sync="dialogVisible" width="60%">
			<el-form :model="chooseItem" label-width="80px">
			  <el-form-item label="时间">
			    <el-input v-model="chooseItem.date"></el-input>
			  </el-form-item>
			  <el-form-item label="姓名">
			<el-input v-model="chooseItem.name"></el-input>
			  </el-form-item>
			  <el-form-item label="地址">
			  <el-input v-model="chooseItem.address"></el-input>
			    </el-form-item>
				<el-form-item>
				    <el-button type="primary" @click="handleEdit">立即创建</el-button>
				    <el-button @click="goback()">取消</el-button>
				  </el-form-item>
				  </el-form>
		</el-dialog> -->
		
	</div>
</template>

<script>
import { Dialog } from 'element-ui';

	 // import commponentVue from '../components/commponent.vue'
	export default {
		name: "product",
		// components:{
		// 	commponentVue
		// },
		data() {
			return {
				 ruleForm: {
				          name: '',
				          region: '',
				          date1: '',
				          date2: '',
				          delivery: false,
				          type: [],
				          resource: '',
				          desc: ''
				        },
				        rules: {
				          name: [
				            { required: true, message: '请输入活动名称', trigger: 'blur' },
				            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
				          ],
				          region: [
				            { required: true, message: '请选择活动区域', trigger: 'change' }
				          ],
				          date1: [
				            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
				          ],
				          date2: [
				            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
				          ],
				          type: [
				            { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
				          ],
				          resource: [
				            { required: true, message: '请选择活动资源', trigger: 'change' }
				          ],
				          desc: [
				            { required: true, message: '请填写活动形式', trigger: 'blur' }
				          ],
						  },
				dialogVisible: false, 
				    chooseItem: {        
				      date: "",
				      name: "",
				      address: ""
				    },
				search_form:{
					select_value1:null,
					select_value2:null,
					input:''
				},
				hehe:'haha',
				 tableData: [],
				  options: [{
				          value: '选项1',
				          label: '黄金糕'
				        }, {
				          value: '选项2',
				          label: '双皮奶'
				        }, {
				          value: '选项3',
				          label: '蚵仔煎'
				        }, {
				          value: '选项4',
				          label: '龙须面'
				        }, {
				          value: '选项5',
				          label: '北京烤鸭'
				        }],
				        value1: '',
						 // tableData: [{
						 //          date: '2016-05-02',
						 //          name: '王小虎',
						 //          address: '上海市普陀区金沙江路 1518 弄'
						 //        }, {
						 //          date: '2016-05-04',
						 //          name: '王小虎',
						 //          address: '上海市普陀区金沙江路 1517 弄'
						 //        }, {
						 //          date: '2016-05-01',
						 //          name: '王小虎',
						 //          address: '上海市普陀区金沙江路 1519 弄'
						 //        }, {
						 //          date: '2016-05-03',
						 //          name: '王小虎',
						 //          address: '上海市普陀区金沙江路 1516 弄'
						 //        }]
				// tableData: [{
				// 	date: '2016-05-02',
				// 	name: '王小虎',
				// 	address: '上海市普陀区金沙江路 1518 弄'
				// }, {
				// 	date: '2016-05-04',
				// 	name: '王小虎',
				// 	address: '上海市普陀区金沙江路 1517 弄'
				// }, {
				// 	date: '2016-05-01',
				// 	name: '王小虎',
				// 	address: '上海市普陀区金沙江路 1519 弄'
				// }, {
				// 	date: '2016-05-03',
				// 	name: '王小虎',
				// 	address: '上海市普陀区金沙江路 1516 弄'
				// }],
				// title: "666"
			}
		},
		methods: {
			 submitForm(formName) {
			        this.$refs[formName].validate((valid) => {
			          if (valid) {
			            alert('submit!');
        } else {
			            console.log('error submit!!');
			            return false;
			          }
			        });
			      },
			      resetForm(formName) {
			        this.$refs[formName].resetFields();
			      },
			goback(){
				this.dialogVisible=false
			},
			 handleEdit() {
			    // 将新数据添加到表格
			    this.tableData.push({ ...this.chooseItem });
			    this.dialogVisible = false; // 关闭对话框
			  },
			 openAddDialog() {
			    this.chooseItem = { date: "", name: "", address: "" }; // 清空表单
			    this.dialogVisible = true; },
				// 打开对话框
			edit(item){
				this.chooseItem=item;
				this.dialogVisible
			},
			search(){
				let name =this.search_form.input;
				console.log(name,"-----------")
				console.log(this.search_form.value1)
			},
			add(){
			this.dialogVisible = true;
			},
			getName(type){
				if(type==1){
					return "woshi1"
				}
				else{
					return"woshiqita"
				}
			},
			getTableData(){
					
				 const loading = this.$loading({
				          lock: true,
				          text: '拼命加载中',
				          spinner: 'el-icon-loading',
				          background: 'rgba(0, 0, 0, 0.7)'
				        });
				let data=[{
					date:"2025-05-21",
					name:"张山",
					avatar:"https://tse2-mm.cn.bing.net/th/id/OIP-C.IuNuzsR9jKSqu2-VTCmNOAHaE8?rs=1&pid=ImgDetMain",
					address:"内蒙古呼和浩特哈打赏"
				},
				{
					date:"2025-05-21",
					name:"张山",
					avatar:"https://tse2-mm.cn.bing.net/th/id/OIP-C.IuNuzsR9jKSqu2-VTCmNOAHaE8?rs=1&pid=ImgDetMain",
					address:"内蒙古呼和浩特哈打赏"
				},
				{
					date:"2025-05-21",
					name:"张山",
					avatar:"https://tse2-mm.cn.bing.net/th/id/OIP-C.IuNuzsR9jKSqu2-VTCmNOAHaE8?rs=1&pid=ImgDetMain",
					address:"内蒙古呼和浩特哈打赏"
				},
				{
					date:"2025-05-21",
					name:"张山",
					avatar:"https://tse2-mm.cn.bing.net/th/id/OIP-C.IuNuzsR9jKSqu2-VTCmNOAHaE8?rs=1&pid=ImgDetMain",
					address:"内蒙古呼和浩特哈打赏"
				}];
				 this.tableData = data;
				setTimeout(() => {
				          loading.close();
				        }, 2000);
			}
			// showBack() {
			// 	this.tableData = [...this.tableData, ...this.tableData]
			// },
			// goBack() {
			// 	this.$router.back()
			// },
			// callBackFuc(values){
			// 	this.values=values;
			// }
		},
		beforeCreate(){
			console.log("加载到dom元素前")
		},
		created(){
			console.log("加载到dom元素")
		},
		mounted() {
			this.getTableData(); 
			console.log("加载到dom元素结束")
		}
	}
</script>
<style>
	/* .pagination-container {
	  margin: 0;
	  text-align: center;
	} */
</style>